<template>
  <div class="header-lay">
    <el-scrollbar class="menu-scrollbar" wrap-style="overflow-x:hidden;" >
      <MenuNav ref="navMenu" class="menu-lay"
               :isCollapse="isCollapse" :menus="menus"
               :activeIndex="activeIndex" @select="handleSelect"/>
    </el-scrollbar>
    <div class="bottom-lay">
      <el-link :underline="false" plain type="primary" @click="onCollapseUpdate">
        <el-icon>
          <Expand v-if="isCollapse"/>
          <Fold v-else />
        </el-icon>
      </el-link>
    </div>
  </div>
</template>

<script lang="ts" setup>

import router from "@/router";
import {onMounted, ref} from "vue";
import MenuNav from "@/views/navs/Menu";
import {useActiveMenu} from "@/utils/UseActiveMenu";
import {Expand, Fold} from "@element-plus/icons-vue";

const isCollapse = ref(false);
const navMenu = ref();
const emits = defineEmits(["navMenuChanged"]);

interface Props {
  name: string,
  title?: string | '';
  menus: MenuType[];
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  user: undefined,
});

const activeIndex = ref();
const {setActiveMenuCallback, updateActiveMenu} = useActiveMenu(props.name);

const onCollapseUpdate = () => {
  isCollapse.value = !isCollapse.value;
  navMenu.value?.updateCollapse(isCollapse.value);
}

const handleSelect = (key: string, keyPath: string[]) => {
  emits("navMenuChanged", key);
  updateActiveMenu(key);
  router.push({path: key.replace(':id*', '')})
}

const activeMenuChanged = (item: string) => {
  if (item && item !== activeIndex.value) {
    activeIndex.value = item;
  }
}

onMounted(() => {
  setActiveMenuCallback(activeMenuChanged);
})

</script>

<style scoped>
.el-scrollbar__bar{
  display: none !important;
}

:deep(.el-scrollbar__wrap ){
  overflow-x: hidden !important;
}

:deep(.el-scrollbar__bar.is-horizontal) {
  height: 0 !important;
}

.header-lay {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ebeef5;
  height: 100%;
  overflow: hidden;
  //box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  //transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
}

.menu-scrollbar {
  flex: 1;
  padding: 0;
  margin: 0;
  border: none;
}

.menu-lay {
  padding: 0;
  border: none;
}

.bottom-lay {
  padding: 12px 16px;
  color: #333;
  align-self: flex-end;
}

</style>
